<template>
  <div>
    <!-- <ContentWrap>
      <el-table row-key="id" :stripe="true" :show-overflow-tooltip="true" :data="list">
        <el-table-column label="获取日志接口" align="center" prop="serviceType">
          <template #default="scope">
            <span v-if="scope.row.serviceType == '1'"> 车辆送修 </span>
            <span v-if="scope.row.serviceType == '2'"> 电子运单 </span>
          </template>
        </el-table-column>
        <el-table-column label="操作服务启停接口" align="center" prop="serviceType">
          <template #default="scope">
            <span v-if="scope.row.serviceType == '1'"> 车辆送修 </span>
            <span v-if="scope.row.serviceType == '2'"> 电子运单 </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="120px">
          <template #default="scope">
            <el-button type="primary" link @click="handleServiceLog(scope.row)"
              >获取日志接口</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </ContentWrap> -->

    <!-- 测试接口表格保持不变 -->
    <ContentWrap>
      <el-table row-key="id" :stripe="true" :show-overflow-tooltip="true" :data="listTest">
        <el-table-column label="测试接口服务健康监测" align="center" prop="label" />

        <!-- 添加状态列 -->
        <el-table-column label="状态" align="center" width="100px">
          <template #default="scope">
            <el-tag v-if="scope.row.status === 'loading'" type="info">
              <el-icon><Loading /></el-icon>
              测试中
            </el-tag>
            <el-tag v-else-if="scope.row.status === 'passed'" type="success">正常</el-tag>
            <el-tag v-else-if="scope.row.status === 'failed'" type="danger">异常</el-tag>
            <el-tag v-else type="default">未测试</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="240px">
          <template #default="scope">
            <el-button type="primary" link @click="handleServiceLog(scope.row)">获取日志</el-button>
            <el-button type="primary" link @click="handleTestService(scope.row, 'start')"
              >启动服务</el-button
            >
            <el-button type="primary" link @click="handleTestService(scope.row, 'stop')"
              >停止服务</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </ContentWrap>

    <!-- ETL状态查询按钮 -->
    <!-- <ContentWrap style="text-align: center; margin: 20px 0">
      <el-button type="primary" :loading="etlLoading" @click="handleFetchETLStatus">
        <el-icon v-if="etlLoading" />
        查询ETL转换状态
      </el-button>
    </ContentWrap> -->

    <!-- ETL状态表格 -->
    <ContentWrap>
      <el-table
        row-key="etlName"
        :stripe="true"
        :show-overflow-tooltip="true"
        :data="etlStatusList"
        style="margin-top: 20px"
      >
        <el-table-column label="转换名称" align="center" prop="etlName" />
        <el-table-column label="监测时间" align="center" prop="etlMonitorTime" />
        <el-table-column label="日志生成时间" align="center" prop="etlLogTime">
          <template #default="scope">
            <span>{{ scope.row.etlLogTime || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="转换状态" align="center" prop="etlStatus">
          <template #default="scope">
            <el-tag :type="getStatusTagType(scope.row.etlStatus)">
              {{ getStatusText(scope.row.etlStatus) }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </ContentWrap>

    <!-- 日志弹窗组件 -->
    <el-dialog
      v-model="logDialogVisible"
      title="服务日志"
      width="800px"
      :close-on-click-modal="false"
    >
      <template #header>
        <div class="dialog-header">
          <span>服务日志</span>
          <el-button
            type="primary"
            size="small"
            :loading="refreshing"
            @click="handleRefresh"
            v-if="currentServiceType"
          >
            <el-icon v-if="refreshing"><loading /></el-icon>
            <el-icon v-else><Refresh /></el-icon>
            刷新
          </el-button>
        </div>
      </template>
      <el-scrollbar height="400px">
        <pre class="log-content">{{ formattedServiceLog }}</pre>
      </el-scrollbar>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import * as approvalApi from '@/api/business/approval'
import { Refresh, Loading } from '@element-plus/icons-vue'
const message = useMessage() // 消息弹窗

// 现有数据定义
const list = ref([
  { serviceType: '1', operationType: '1' },
  { serviceType: '2', operationType: '2' }
])

const listTest = ref([
  {
    label: '司机信息查询服务接口健康监测',
    id: '1',
    status: 'untested',
    serviceType: '2',
    operationType: '2'
  },
  {
    label: '车辆信息查询服务接口健康监测',
    id: '2',
    status: 'untested',
    serviceType: '2',
    operationType: '2'
  },
  {
    label: '运单信息查询服务接口健康监测',
    id: '3',
    status: 'untested',
    serviceType: '2',
    operationType: '2'
  },
  {
    label: '车辆送修信息查询服务接口健康监测',
    id: '4',
    status: 'untested',
    serviceType: '1',
    operationType: '1'
  }
])

// 日志相关变量
const logDialogVisible = ref(false)
const serviceLog = ref('')
const refreshing = ref(false)
const currentServiceType = ref('') // 保存当前查询的服务类型

// ETL状态相关变量
const etlStatusList = ref<any[]>([])
const etlLoading = ref(false)
// const showETLTable = ref(false) // 控制表格显示

const handleTestService = async (row: any, operationType: string) => {
  // debugger
  if (operationType === 'start') {
    row.operationType = '1'
  } else if (operationType === 'stop') {
    row.operationType = '2'
  }
  approvalApi
    .operationService({
      serviceType: row.serviceType,
      operationType: row.operationType
    })
    .then((res) => {
      if (res) {
        message.success(`服务${operationType === 'start' ? '启动' : '停止'}成功`)
      } else {
        message.error(`服务${operationType === 'start' ? '启动' : '停止'}失败`)
      }
    })
}

// 计算属性：格式化日志内容，添加换行符
const formattedServiceLog = computed(() => {
  if (!serviceLog.value) return ''

  // 解析日志并添加换行符
  // 正则表达式匹配日期时间格式（2025-10-16 16:23:16.431）
  const logPattern = /(\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}\.\d{3})/g

  // 在每个日期时间前添加换行符
  let formattedLog = serviceLog.value.replace(logPattern, '\n$1')

  // 确保首行没有空行
  if (formattedLog.startsWith('\n')) {
    formattedLog = formattedLog.substring(1)
  }

  return formattedLog
})

// 获取ETL状态文本
const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    '0': '存在错误',
    '1': '正常',
    '2': '未正常生成日志',
    '3': '固定日志不存在'
  }
  return statusMap[status] || status
}

// 获取ETL状态标签类型
const getStatusTagType = (status: string) => {
  const typeMap: Record<string, string> = {
    '0': 'danger',
    '1': 'success',
    '2': 'warning',
    '3': 'info'
  }
  return typeMap[status] || 'default'
}

// 获取ETL状态数据的处理函数
const handleFetchETLStatus = async () => {
  try {
    etlLoading.value = true
    // 调用接口获取ETL状态数据
    const res = await approvalApi.getETLStatus()

    if (res) {
      etlStatusList.value = res
      // showETLTable.value = true // 显示表格
      // message.success('获取ETL状态成功')
    } else {
      message.error('获取ETL状态失败')
    }
  } catch (error) {
    console.error('获取ETL状态时发生错误:', error)
    message.error('获取ETL状态时发生错误')
  } finally {
    etlLoading.value = false
  }
}

const autoTestAllInterfaces = async () => {
  // 为每个接口创建一个测试Promise
  const testPromises = listTest.value.map(async (item) => {
    // 设置为测试中状态
    item.status = 'loading'

    try {
      let res = false
      switch (item.id) {
        case '1':
          res = await approvalApi.testDriverInfoConn()
          // if (res) {
          //   message.success('司机信息查询服务接口健康监测测试成功')
          // } else {
          //   message.error('司机信息查询服务接口健康监测测试失败')
          // }
          break
        case '2':
          res = await approvalApi.testVehicleInfoConn()
          // if (res) {
          //   message.success('车辆信息查询服务接口健康监测测试成功')
          // } else {
          //   message.error('车辆信息查询服务接口健康监测测试失败')
          // }
          break
        case '3':
          res = await approvalApi.testShippingNoteConn()
          // if (res) {
          //   message.success('运单信息查询服务接口健康监测测试成功')
          // } else {
          //   message.error('运单信息查询服务接口健康监测测试失败')
          // }
          break
        case '4':
          res = await approvalApi.testCarRepairInfoConn()
          // if (res) {
          //   message.success('车辆送修信息查询服务接口健康监测测试成功')
          // } else {
          //   message.error('车辆送修信息查询服务接口健康监测测试失败')
          // }
          break
      }

      // 更新状态
      item.status = res ? 'passed' : 'failed'
    } catch (error) {
      console.error(`测试接口 ${item.label} 时发生错误:`, error)
      message.error(`测试${item.label}时发生错误`)
      item.status = 'failed'
    }
  })

  // 等待所有测试完成
  await Promise.all(testPromises)
}
// 修改：日志获取函数
const handleServiceLog = async (row: any) => {
  // 保存当前服务类型，用于刷新功能
  currentServiceType.value = row.serviceType

  try {
    // 显示加载状态
    refreshing.value = true

    // 模拟从接口获取数据
    // 实际项目中应该使用下面这行代码调用真实接口
    const res = await approvalApi.getServiceLog({ serviceType: row.serviceType })

    // 这里使用模拟数据
    // const res = data.value

    // 检查接口返回是否有数据
    if (res) {
      // 将日志数据赋值给变量
      serviceLog.value = res
      // 显示弹窗
      logDialogVisible.value = true
    } else {
      message.error('获取日志失败')
    }
  } catch (error) {
    console.error('获取日志时发生错误:', error)
    message.error('获取日志时发生错误')
  } finally {
    // 隐藏加载状态
    refreshing.value = false
  }
}

// 新增：刷新日志函数
const handleRefresh = async () => {
  if (!currentServiceType.value) {
    message.warning('请先选择服务类型')
    return
  }

  try {
    // 显示加载状态
    refreshing.value = true

    // 调用日志接口获取最新数据
    // 实际项目中应该使用下面这行代码调用真实接口
    const res = await approvalApi.getServiceLog({ serviceType: currentServiceType.value })

    // 这里使用模拟数据
    // const res = data.value

    // 检查接口返回是否有数据
    if (res) {
      // 更新日志数据
      serviceLog.value = res
      message.success('日志刷新成功')
    } else {
      message.error('刷新日志失败')
    }
  } catch (error) {
    console.error('刷新日志时发生错误:', error)
    message.error('刷新日志时发生错误')
  } finally {
    // 隐藏加载状态
    refreshing.value = false
  }
}

onMounted(() => {
  autoTestAllInterfaces()
  handleFetchETLStatus()
})
</script>

<style scoped>
/* 为日志内容添加样式 */
.log-content {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  margin: 0;
  padding: 10px;
  background-color: #f8f8f8;
  border-radius: 4px;
  overflow-x: auto;
}

/* 弹窗头部样式 */
.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
</style>
